<template>
  <div class="tem_child">
    <h3>子组件B</h3>
    <p class="info">子组件向父组件传值（通过事件形式）</p>
    <div class="box-row">
      <input type="text" v-model="val" @blur="changeNum">
      <button @click="doRise">增加</button>
      <button @click="doReduce">减少</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "childB",
  data(){
    return{
      val:0
    }
  },
  methods:{
    doRise(){
      this.val++;
      let param={
        val:this.val,
        msg:'点击增加'
      }
      this.$emit('doRise',param)
    },
    doReduce(){
      this.val--;
      let param={
        val:this.val,
        msg:'点击减少'
      }
      this.$emit('doReduce',param)
    },
    changeNum() {
      let param = {
        val: this.val,
        msg: '手动输入'
      }
      this.$emit('changeNum', param)
    },

  }
}
</script>

<style scoped>

</style>
